var numList = [12,43,23,56,99,34,89];
function getDate(name) {
	var data = document.getElementsByTagName(name)[0].value;
	if (Number(data) >10 && Number(data) <100) {
		return  data;
	}else{
		alert("请输入10~100范围内的数字");
		return "";
	}
}
/**
 * 跨浏览器兼容事件监听
 * @param element
 * @param type
 * @param handler
 */
function eventHandler(element,type,handler) {
	if (element.addEventListener){
		element.addEventListener(type,handler,false);
	}else if (element.attachEvent){
		element.attachEvent("on" + type,handler);
	}else {
		element["on" + type] = handler;
	}

}
function leftInputBtnHandler() {
	var dat = getDate("input");
	if (dat == ""){
		numList.unshift();//若数字不属于该范围，则什么也不加入数组
	}else {
		numList.unshift(dat);
	}
	renderList();
}
function RightInputBtnHandler() {
	var dat = getDate("input");
	if (dat == ""){
		numList.push();
	}else {
		numList.push(dat);
	}
	renderList();
}
function leftOutputBtnHandler() {
	numList.shift();
	renderList();
}
function RightOutputHandler() {
	numList.pop();
	renderList();
}
function buddleSort() {
	var temp;
	for (var i = 0;i < numList.length - 1;i++){
		for (var j = 0;j < numList.length - i -1;j++){
			if (numList[j] > numList[j + 1]){
				temp = numList[j];
				numList[j] = numList[j + 1];
				numList[j + 1] = temp;
				renderList();
			}
		}
	}

}
function labelLeft(i) {
	return Number(20 * i + 10);
}
/**
 * 图标渲染函数
 */
function renderList (){
	var number = " ";
	for(var i = 0;i < numList.length;i++){
		 number += "<label class='squard' style='width: 20px;height: "+numList[i]+"px;left:"+labelLeft(i)+"px'><span>"+numList[i]+"</span></label>";
	}
	document.getElementById("show-number").innerHTML = number;
}
/**
 * 初始化函数
 */
function init() {
	var button = document.getElementsByTagName("button");
	for (var i = 0; i < button.length; i++) {
		var buttonID = button[i].id;
		// if (buttonID == "left-input") {
		// 	// button[i].onclick = leftInputBtnHandler;
		// 	eventHandler(button[i],'click',leftInputBtnHandler);
		// }else if(buttonID == "right-input"){
		// 	// button[i].onclick = RightInputBtnHandler;
		// 	eventHandler(button[i],'click',RightInputBtnHandler);
		// }else if (buttonID == "left-output") {
		// 	// button[i].onclick = leftOutputBtnHandler;
		// 	eventHandler(button[i],'click',leftOutputBtnHandler);
		// }else{
		// 	// button[i].onclick = RightOutputHandler;
		// 	eventHandler(button[i],'click',RightOutputHandler);
		// }
		switch (buttonID){
			case "left-input":
				eventHandler(button[i],'click',leftInputBtnHandler);
				break;
			case "right-input":
				eventHandler(button[i],'click',RightInputBtnHandler);
				break;
			case "left-output":
				eventHandler(button[i],'click',leftOutputBtnHandler);
				break;
			case "right-output":
				eventHandler(button[i],'click',RightOutputHandler);
				break;
			case "bubble-sort":
				eventHandler(button[i],'click',buddleSort);
				break;
		}
	}
}
init();